<template>
  <div>
    <div class="header">
      <div class="title" unselectable="on">数据可视化分析</div>
      <div class="headerMenuBox">
        <ul>
          <li v-for="(item, index) in headerMenu" :class="{liClickCls:changeSelectStyle === index}">
            <div class="hMenuItem" @click="menuClick(item, index)"
                 :class="{menuClickCls:changeSelectStyle === index}">
              {{item.text}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="homeBody">
      <div class="left">
        11
      </div>
      <div class="main">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				headerMenu: [
					{
						text: '操作中心',
            path: '/cloudDevCenter'
					},
					{
						text: '系统设置',
            path: '/systemSetting'
					},
					{
						text: '用户信息',
            path: '/userInfo'
					},
					{
						text: '运维管理',
            path: '/operateManage'
					}
				],
				changeSelectStyle: ''
			}
		},
		methods: {
			menuClick(item, index) {
				this.changeSelectStyle = index;
				this.$router.push(item.path);
			}
		}
	}
</script>

<style scoped>

  .header {
    width: 100%;
    height: 79px;
    background-color: #377fff;
    line-height: 79px;
    display: flex;
  }

  .title {
    width: 15%;
    font-size: 24px;
    -webkit-user-select: none;
    text-align: center;
    background-color: #377fff;
    color: #ffffff;
    border-right: 1px #fff solid;
  }

  .headerMenuBox {
    margin-left: 60px;
    width: 85%;
    line-height: 49px;
    margin-top: 30px;
  }

  .headerMenuBox ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
  }

  .headerMenuBox li {
    display: inline;
    text-align: center;
    margin-right: 10px;
    position: relative;
  }

  .hMenuItem {
    width: 120px;
    cursor: pointer;
    color: #ffffff;
    font-size: 20px;
  }

  .menuClickCls {
    background-color: #ffffff;
    color: black;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: bold;
  }

  .liClickCls:before {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    left: -7px;
    bottom: 0;
    background-image: url('~assets/img/left.png');
  }

  .liClickCls:after {
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    right: -7px;
    bottom: -1px;
    background-image: url('~assets/img/right.png');
  }

  .homeBody {
    display: flex;
    height: 400px;
  }

  .left {
    width: 223px;
    height: 600px;
    background-color: #eeeeee;
  }

  .main {
    width: 86%;
    height: 400px;
    /*background-color: darkgrey;*/
  }

</style>